const Son1 = () => {
  return (
    <div className="son1">
      <ul>
        <li>热门</li>
        <li>最新</li>
        <li>热榜</li>
      </ul>
      <div className="div">
        {[0, 1, 2, 3, 4, 5, 6].map((item, index) => {
          return (
            <div key={index}>
              <div className="top">
                <div>
                  <span>李勇宁</span>
                  <span>一天前</span>
                </div>
                <div>
                  <span style={{ float: "right" }}>javaScript</span>
                </div>
              </div>
              <div className="main">
                <div>
                  <div className="left">
                    <h2>Vue 源码解读（3）—— 响应式原理</h2>
                    <p>
                      详细讲解了 Vue 响应式的实现原理
                      以及从源码层次来回答一些和响应式相关的面试题 ........
                    </p>
                    <div>
                      <span>赞 53</span>
                      <span>发言 19</span>
                      <span>↑ 分享</span>
                    </div>
                  </div>
                  <div className="right">
                    <img
                      src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/29cf6665c2f24b2cac8d860f48668fc1~tplv-k3u1fbpfcp-zoom-mark-crop-v2:0:0:426:240.awebp"
                      alt=""
                    />
                  </div>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};
export default Son1;
